<template>
  <div>
    <el-dialog
      class="dialog"
      :title="Id?'修改学科':'新增学科'"
      :visible="addVisible"
      width="40%"
      @update:visible="$emit('update:addVisible',false)"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="目录名称" prop="subjectName">
          <el-input v-model="ruleForm.subjectName" />
        </el-form-item>
      </el-form>
      <div class="switch">
        <h4>是否显示</h4>
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="change($event)"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:addVisible',false)">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addSubjectAPI, UpdateSubjectAPI } from '@/api'
export default {
  props: {
    addVisible: Boolean,
    subjectList: {
			type: Array,
			default: () => {}
		},
    updateList: {
			type: Object,
			default: () => {}
		},
    id: {
			type: Number,
			default: 0
		}
  },
  data() {
    return {
      ruleForm: {
        subjectName: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      value: true,
      state: 0,
			Id: false
    }
  },
  watch: {
    updateList: {
      handler(value) {
        if (value) {
          // console.log(value.subjectName);
          this.ruleForm.subjectName = value.subjectName
        } else {
          this.ruleForm.subjectName = ''
        }

      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change(res) {
      if (res) {
        res = 1
        this.state = res
      } else {
        res = 0
        this.state = res
      }
      //  console.log(this.state);

    },

    /**
     * 确定
     */
    confirm() {
      if (this.id) {
        // 有id 为编辑
        this.editSubject()
      } else {
        this.addSubject()
      }

    },
    /**
     * 添加
     *
     */
    addSubject() {
			this.Id = false
      this.$refs.ruleFormRef.validate(async(isok) => {
        if (!isok) return
        await addSubjectAPI(this.ruleForm.subjectName, this.state)
        // console.log(res);
        // 更新数据
        this.$emit('success')
        // 关闭弹窗
        this.$emit('update:addVisible', false)
				this.$message.success('添加成功!')
      })
    },
    /**
     * 编辑
     */
    async editSubject() {
			this.Id = true
      await UpdateSubjectAPI(this.updateList.id, this.ruleForm.subjectName, this.state)
      this.$emit('success')
      this.$emit('update:addVisible', false)
			this.$emit('updateSubject')
      this.$message.success('学科修改成功')
    }

  }
}
</script>

<style lang="scss" scoped>
.switch {
  margin: 30px;
	h4{
		display: inline-block;
		margin-right: 15px;
	}
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}
</style>
